<!DOCTYPE html>
<html lang="ru" class="dark">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta property="og:title" content="Josty's devpage">
	<meta property="og:description" content="Страница разработчика: Josty Qweenq">
	<link rel="shortcut icon" href="/favicon.png" type="image/png">
	<title>Josty Qweenq</title>
	<script>
		if(localStorage.getItem('color-scheme')=="light") {
			document.documentElement.classList.replace("dark", "light")
		}
		if(localStorage.getItem('lang')=="Ru") {
			console.log("Need to use ru language...")
		}
	</script>
	<style>
		:root {
			--primary: #007fff;
			--on-primary: #fff;
			--secondary: #0059b2;
			--on-secondary: #fff;
		}

		.dark{
				color-scheme: dark;
				--background: #111;
				--on-background: #fff;
		}

		.light {
			color-scheme: light;
			--background: #ddd;
			--on-background: #000;
		}

		* {
			margin: 0;
			padding: 0;
			text-decoration: none;
		}

		html, body {
			height: 100%;
		}

		.wrapper {
			min-height: 100%;
			display: flex;
			flex-direction: column;
		}

		body {
			transition: 0.3s;
			background: var(--background);
			color: var(--on-background);
			font-family: Inter;
		}

		@media (min-width: 1024px) { /* 1024px - 0 */
			.img-genshin {
				float: left;
			}

			:root{
				--page-width: 60%;
				--button-columns: 1fr 1fr;
				--go-top-width: 148px;
				--go-top-radius: 10px;
			}
			
			#go-top {
				position: fixed;
				padding: 16px;
			}

			#go-top>svg {
				margin: 0;
			}
		}

		@media (max-width: 1024px) { /* 900px - 1024px */
			.img-genshin {
				float: left;
			}

			:root{
				--page-width: 70%;
				--button-columns: 1fr 1fr;
				--go-top-width: 82px;
				--go-top-radius: 10px;
			}

			#go-top {
				position: fixed;
				padding: 16px;
			}

			#go-top>p {
				display: none;
			}

			#go-top>svg {
				margin: 0;
			}
		}

		@media (max-width: 900px) { /* 700px - 900px */
			.img-genshin {
				float: left;
			}

			:root{
				--page-width: 80%;
				--button-columns: 1fr 1fr;
			}
		}

		@media (max-width: 700px) { /* 320px - 700px */
			.part__title {
				text-align: center;
			}

			.img-genshin {
				float: unset;
				position: relative;
				left: 50%;
				transform: translate(-50%);
			}

			:root{
				--page-width: calc(100% - 20px);
				--button-columns: 1fr;
				--go-top-radius: 16px;
			}

			#go-top {
				position: initial;
				padding: 32px;
			}

			#go-top>p {
				display: initial;
			}

			#go-top>svg {
				margin: 0 16px 0 0;
			}
		}

		@media (max-width: 320px) { /* 0 - 320px */
			.part__title {
				text-align: center;
			}

			.img-genshin {
				margin: 0 auto;
			}

			:root{
				--page-width: calc(100% - 20px);
				--button-columns: 1fr;
				--go-top-padding: 32px;
			}
		}
	</style>
</head>

<body>
	<div class="wrapper"></div>
	<script type="module" src="/src/main.js"></script>
</body>

</html>
